import { RedoOutlined, SearchOutlined } from "@ant-design/icons"
import { Meta, StoryObj } from "@storybook/react"
import { Button, Form, Input } from "antd"
import React from "react"
import { IntlProvider } from "react-intl"

import { localeConfig } from "@/locales"

import { Slot } from "../slot"
import { QueryForm } from "."
import InputRange from "./components/inputRange"

const meta = {
	title: "QueryForm",
	component: QueryForm,
	parameters: {
		layout: "centered"
	},
	tags: ["autodocs"]
} satisfies Meta<typeof QueryForm>

export default meta
type Story = StoryObj<typeof meta>

const defaultForm = [
	() => {
		const locale = "zh_CN"
		const [hidden, setHidden] = React.useState(false)
		const [form] = Form.useForm()

		return (
			<IntlProvider locale={locale.split("_")[0]} messages={localeConfig[locale]}>
				<QueryForm form={form} onFinish={() => 1}>
					<Slot slotName="formItems">
						{hidden || <Input />}
						<InputRange />
						<Form.Item label="123">
							<Input></Input>
						</Form.Item>
					</Slot>
					<Slot slotName="buttons">
						<Button type="primary" icon={<SearchOutlined />}>
							Find
						</Button>
						<Button icon={<RedoOutlined />}>Reset</Button>
						<Button onClick={() => setHidden(!hidden)}>{hidden ? "Expand" : "Collapse"}</Button>
					</Slot>
				</QueryForm>
			</IntlProvider>
		)
	}
]

export const Default: Story = {
	decorators: defaultForm,
	args: {
		children: null
	}
}
